<template>
    <div class="container">
        <div class="top">
            <span class="count">各项消费占比</span>
            <img src="@/assets/images/dataScreen-title.png" alt="">
        </div>
        <div class="main">
            <div class="radarEcharts" ref="radarEchartsEL"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

import * as echarts from 'echarts/core';
import { LegendComponent, TitleComponent } from 'echarts/components';
import { RadarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([TitleComponent, LegendComponent, RadarChart, CanvasRenderer]);

const radarEchartsEL = ref()

const radarEchartsFun = () => {
    const radarEcharts = echarts.init(radarEchartsEL.value);
    radarEcharts.setOption({
        tooltip: {
            trigger: 'item',
        },
        legend: {
            data: ['2022年', '2023年', '2024年'],
            orient: 'vertical',
            left: '20%',
            top: '30%',
            textStyle: {
                color: '#fff'
            }
        },
        radar: {
            radius: '70%',
            center: ['60%', '50%'],
            indicator: [
                { name: '吃饭', max: 6500 },
                { name: '住所', max: 16000 },
                { name: '出行', max: 30000 },
                { name: '游玩', max: 38000 },
                { name: '门票', max: 52000 },
                { name: '景点', max: 25000 }
            ],
            axisName: {
                color: '#fff'
            }
        },
        series: [
            {
                type: 'radar',
                data: [
                    {
                        value: [4200, 3000, 20000, 35000, 45000, 20000],
                        name: '2022年'
                    },
                    {
                        value: [4000, 9000, 24000, 36600, 45000, 18000],
                        name: '2023年'
                    },
                    {
                        value: [5000, 14000, 28000, 26000, 50000, 15000],
                        name: '2024年'
                    }
                ]
            }
        ]
    })
}

onMounted(() => {
    radarEchartsFun()
})

</script>

<style lang="scss" scoped>
.container {
    width: 90%;
    flex: 1;
    background-image: url('@/assets/images/dataScreen-main-lb.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0.5vw 0;

    .top {
        width: 100%;
        height: 20%;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .count {
            display: block;
            font-size: 1vw;
            font-weight: 550;
        }

        img {
            width: 5vw;
            height: 0.5vw;
        }
    }

    .main {
        width: 100%;
        height: 80%;

        .radarEcharts {
            width: 100%;
            height: 100%;
        }
    }
}
</style>